<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="../layui/css/layui.css" th:href="@{/webjars/layui/2.5.6/css/layui.css}">
</head>
<body>

<!-- 你的HTML代码 -->
<ul class="layui-nav">
    <li class="layui-nav-item">
        <a href="">控制台<span class="layui-badge">9</span></a>
    </li>
    <li class="layui-nav-item">
        <a href="">个人中心<span class="layui-badge-dot"></span></a>
    </li>
    <li class="layui-nav-item">
        <a href=""><img src="//t.cn/RCzsdCq" class="layui-nav-img">我</a>
        <dl class="layui-nav-child">
            <dd><a href="javascript:;">修改信息</a></dd>
            <dd><a href="javascript:;">安全管理</a></dd>
            <dd><a href="javascript:;">退了</a></dd>
        </dl>
    </li>
</ul>

<div class="layui-fluid">
    <div class="layui-col-md2">

        <img src="#" th:src="${imageUrl}" th:width="200" th:height="200">
        <p>关注我，更多惊喜</p>

    </div>
    <div class="layui-col-md10">
        <table class="layui-table">
            <!--            <colgroup>-->
            <!--                <col width="150">-->
            <!--                <col width="200">-->
            <!--                <col>-->
            <!--            </colgroup>-->
            <thead>
            <tr>
                <th>序号</th>
                <!--                <th>openId</th>-->
                <th>昵称</th>
                <th>图像</th>
                <th>性别</th>
                <th>地址</th>
                <th>关注时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>

            <tr th:each="userEntity,vs:${userList}">
                <td th:text="${vs.index+1}">001</td>
                <!--                <td th:text="${userEntity.openid}">2016-11-29</td>-->
                <td th:text="${userEntity.nickname}">2016-11-29</td>
                <td>
                    <img src="main.html" th:src="${userEntity.headimgurl}" th:height="30px" th:width="35px">
                </td>
                <td th:if="${userEntity.sex==0}" th:text="未知">2016-11-29</td>
                <td th:if="${userEntity.sex==1}" th:text="男">2016-11-29</td>
                <td th:if="${userEntity.sex==2}" th:text="女">2016-11-29</td>

                <td th:text="${userEntity.country + ' ' +userEntity.province +' '+ userEntity.city}">人生就像是一场修行</td>
                <td th:text="${#dates.format(userEntity.subscribe_time*1000,'yyyy-MM-dd HH:mm:ss')}">2020-11-18</td>
                <td>
                    <button class="layui-btn layui-btn-xs">详情</button>
                    <button class="layui-btn layui-btn-xs layui-bg-cyan" name="send_msg"
                            th:attr="myopenid=${userEntity.openid}">发送消息
                    </button>
                </td>
            </tr>

            </tbody>
        </table>
    </div>
</div>

<!--发送消息-->
<form class="layui-form" action="#" style="display: none" id="sendMsgForm">
    <div class="layui-form-item">
        <label class="layui-form-label">openid</label>
        <div class="layui-input-block">
            <input type="text" name="openid" required lay-verify="required" placeholder="openid" autocomplete="off"
                   class="layui-input" readonly="readonly">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">消息类型</label>
        <div class="layui-input-block">
            <select name="msgtype" lay-verify="required" id="msgtype" lay-filter="msgtype">
                <option value="">请选择消息类型</option>
                <option value="text">文本消息</option>
                <option value="news">图文消息</option>
            </select>
        </div>
    </div>

    <!--    文本消息-->
    <div class="layui-form-item mytextclass" id="content_id" style="display: none">
        <label class="layui-form-label">文本消息</label>
        <div class="layui-input-block">
            <input type="text" name="content" required lay-verify="required" placeholder="请输入需要发送的消息" autocomplete="off"
                   class="layui-input">
        </div>
    </div>

    <!--    图文消息内容-->

    <div id="news_id" style="display: none">
        <div class="layui-form-item">
            <label class="layui-form-label">title</label>
            <div class="layui-input-block">
                <input type="text" name="title" placeholder="请输入标题" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">描述</label>
            <div class="layui-input-block">
                <input type="text" name="desc" placeholder="请输入描述信息" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图文链接</label>
            <div class="layui-input-block">
                <input type="text" name="url" placeholder="请输入图文链接" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">图片地址</label>
            <div class="layui-input-block">
                <input type="text" name="picurl" placeholder="请输入图片地址" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">发送消息</button>
            <button type="button" class="layui-btn layui-btn-primary" id="btn_close">关闭</button>
        </div>
    </div>
</form>

<script src="../layui/layui.js" th:src="@{/webjars/layui/2.5.6/layui.all.js}"></script>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'jquery'], function () {
        var layer = layui.layer
            , form = layui.form,
            $ = layui.$;


        $("[name='send_msg']").click(function () {

            let openid = $(this).attr("myopenid");
            $("[name='openid']").val(openid);

            layer.open({
                type: 1,
                content: $('#sendMsgForm'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                area: '500px'
            });

        });


        //监听 切换事件
        form.on('select(msgtype)', function (data) {
            console.log(data.elem); //得到select原始DOM对象
            console.log(); //得到被选中的值
            console.log(data.othis); //得到美化后的DOM对象

            var msgtype = data.value;
            if (msgtype === "text") {
                $("[name='content']").val("");
                $("#content_id").show();
                $("#news_id").hide();

            } else {
                form.render();
                $("#content_id").hide();
                $("#news_id").show();
            }

        });

        //监听表达 提交
        form.on('submit(formDemo)', function (data) {
            // console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            // console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            let param = data.field;
            $.post("send/kfmsg", param, function (result) {
                if (result === 1) {
                    layer.msg('消息发送成功', {icon: 5});
                    layer.closeAll();
                } else {
                    layer.msg('消息发送失败', {icon: 5});
                }
            }, "json")

            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        $("#btn_close").click(function () {
            layer.closeAll();
        });

    });
</script>
</body>
</html>